import React from "react";
import { useNavigate } from "react-router-dom";
import "../home/Home.css";

function Index() {
  const navigate = useNavigate();

  // 处理页面导航
  const handleNavigation = (page: string) => {
    switch (page) {
      case "home":
        navigate("/home");
        break;
      case "list":
        navigate("/list");
        break;
      case "user":
        navigate("/user");
        break;
      default:
        break;
    }
  };

  return (
    <div className="home-page">
      {/* 底部导航 */}
      <div className="bottom-nav">
        <div className="nav-item" onClick={() => handleNavigation("home")}>
          <div className="nav-icon">🏠</div>
          <div className="nav-text">首页</div>
        </div>

        <div className="nav-item" onClick={() => handleNavigation("list")}>
          <div className="nav-icon">💬</div>
          <div className="nav-text">消息</div>
        </div>

        <div
          className="nav-item active"
          onClick={() => handleNavigation("user")}
        >
          <div className="nav-icon">👤</div>
          <div className="nav-text">我的</div>
        </div>
      </div>
    </div>
  );
}

export default Index;
